<template>
	<view>
		<view class="header">
			<image src="https://www.szzn.group/uploads/20221121/87108c2cf88f82c73de37b47cbfbe7e5.png" mode=""></image>
			<view class="back" @click="back">
				<image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/1bc7a202210081603105008.png" mode=""></image>
			</view>
		</view>
		<view class="xianshi">
			<view class="">优惠券发放</view>
		</view>
		<view class="youhui" v-for="item in youhuiList" :key="item.id">
			<view class="box-list">
				<view class="lists">
					<view class="left">
						<text class="money-f">￥</text>
						<text class="money">{{parseInt(item.coupon_price)}}</text>
					</view>
					<view class="right">
						<view class="">
							<view class="name">{{item.title}}</view>
							<view class="time">有效期<text style="color: #ff8222;">{{parseInt(item.coupon_price)}}</text>天</view>
						</view>
						<view  class="" @click="linqu(item.id,item.is_lq)">
							<view class="getdraw" :class="item.is_lq?'active':''">{{item.is_lq?'已领取':'领取'}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getyouhui,
		linquyouhui
	} from '@/api/api.js'
	export default {
		data() {
			return {
				youhuiList: [],
				total: 0,
				page: 1,
				limit: 20,
				falg: false
			}
		},
		onShow() {
			this.getyouhui()
		},
		onReachBottom() {
			this.page++
			if (this.total == this.youhuiList) return
			uni.showLoading({
				title: '加载中'
			})
			let data = `page=${this.page}&limit=${this.limit}`
			getyouhui(data).then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.youhuiList = res.data.data.data
				}
			})
		},
		methods: {
			getyouhui() {
				let data = `page=${this.page}&limit=${this.limit}`
				getyouhui(data).then(res => {
					this.youhuiList = res.data.data.data
					this.total = res.data.data.count
					this.$forceUpdate()
				})
				this.$forceUpdate()
			},
			back(){
				uni.navigateBack()
			},
			linqu(id,statu) {
				if(statu)return uni.showToast({
					title:'已领取',
					duration:1000,
					icon:'error'
				})
				console.log(this.falg)
				if (this.falg) return uni.showToast({
					title:'操作频繁',
					duration:800,
					icon:'error'
				})
				let data = `cid=${id}`
				linquyouhui(data).then(res => {
					if (res.data.code == '200') {
						console.log(res)
						this.falg = true
						uni.showToast({
							title: '领取成功',
							duration: 1000
						})
						this.getyouhui()
						let times = setTimeout(() => {
							this.falg = false
							clearTimeout(times)
						}, 5000)
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		image {
			width: 100vw;
			height: 476rpx;
			display: block
		}

		.back {
			position: fixed;
			top: 100rpx;
			left: 40rpx;
			color: #fff;
			font-size: 32rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
			}
		}
	}

	.xianshi {
		padding: 30rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.youhui {
		margin-bottom: 20rpx;
	}

	.box-list {
		width: 684rpx;
		margin: 0 30rpx;
		background: url('https://www.szzn.group/uploads/20221121/330be103b15d1021350188f35b02f6bf.png')no-repeat;
		box-sizing: border-box;
		background-size: 100% 100%;

		.lists {
			height: 200rpx;
			display: flex;
			align-items: center;

			.left {
				width: 186rpx;
				text-align: center;
				color: #fff;
				font-weight: 700;

				.money-f {
					font-size: 36rpx;
				}

				.money {
					font-size: 72rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				width: 500rpx;
				justify-content: space-between;
				padding: 0 28rpx 0 38rpx;

				.name {
					width: 288rpx;
					font-weight: 700;
					font-size: 36rpx;
				}

				.time {
					font-size: 24rpx;
					color: #666;
					margin-top: 5rpx;
				}

				.getdraw {
					width: 114rpx;
					text-align: center;
					height: 49rpx;
					line-height: 49rpx;
					font-size: 28rpx;
					box-shadow: 0px 4px 4px #FFD6B7;
					background: linear-gradient(270.38deg, #FF6E01 -1.95%, #FF984B 117.53%);
					border-radius: 12.3242px;
					color: #fff;
				}
			}
		}
	}
	.active {
		background: linear-gradient(270.38deg, #aaa -1.95%, #eee 117.53%) !important;
		border-radius: 12.3242px;
		box-shadow: 0px 4px 4px #eee !important;
	}
</style>
